import React from 'react';
import { Attendance, statusOptions } from '../types';

interface AttendanceDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  attendanceData: Attendance | null;
}

const AttendanceDetailModal: React.FC<AttendanceDetailModalProps> = ({
  isOpen,
  onClose,
  attendanceData,
}) => {
  // 获取状态对应的标签信息
  const getStatusInfo = (status: string) => {
    return statusOptions.find(option => option.value === status) || { label: status, color: 'default' };
  };

  // 如果模态框未打开或没有数据，则不渲染
  if (!isOpen || !attendanceData) return null;

  // 处理模态框外部点击关闭
  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  // 处理ESC键关闭模态框
  React.useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
    }

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen, onClose]);

  const statusInfo = getStatusInfo(attendanceData.status);

  return (
    <div className="modal-overlay" onClick={handleOverlayClick}>
      <div className="modal-content">
        <div className="modal-header">
          <h2 className="modal-title">考勤详情</h2>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        <div className="modal-body">
          <div className="detail-section">
            <div className="detail-item">
              <div className="detail-label">考勤ID</div>
              <div className="detail-value">{attendanceData.id}</div>
            </div>

            <div className="detail-item">
              <div className="detail-label">考勤日期</div>
              <div className="detail-value">{attendanceData.date}</div>
            </div>

            <div className="detail-item">
              <div className="detail-label">学生信息</div>
              <div className="detail-value">
                {attendanceData.studentName}
                <br />
                <span style={{ fontSize: '12px', color: '#999' }}>ID: {attendanceData.studentId}</span>
              </div>
            </div>

            <div className="detail-item">
              <div className="detail-label">班级信息</div>
              <div className="detail-value">
                {attendanceData.className}
                <br />
                <span style={{ fontSize: '12px', color: '#999' }}>ID: {attendanceData.classId}</span>
              </div>
            </div>

            <div className="detail-item">
              <div className="detail-label">考勤状态</div>
              <div className="detail-value">
                <span className={`status-badge ${attendanceData.status}`}>
                  {statusInfo.label}
                </span>
              </div>
            </div>

            <div className="detail-item">
              <div className="detail-label">备注</div>
              <div className="detail-value">{attendanceData.remark || '无备注信息'}</div>
            </div>

            {attendanceData.createdAt && (
              <div className="detail-item">
                <div className="detail-label">创建时间</div>
                <div className="detail-value">
                  {new Date(attendanceData.createdAt).toLocaleString('zh-CN')}
                </div>
              </div>
            )}

            {attendanceData.createdBy && (
              <div className="detail-item">
                <div className="detail-label">创建人</div>
                <div className="detail-value">{attendanceData.createdBy}</div>
              </div>
            )}

            {attendanceData.updatedAt && (
              <div className="detail-item">
                <div className="detail-label">更新时间</div>
                <div className="detail-value">
                  {new Date(attendanceData.updatedAt).toLocaleString('zh-CN')}
                </div>
              </div>
            )}

            {attendanceData.updatedBy && (
              <div className="detail-item">
                <div className="detail-label">更新人</div>
                <div className="detail-value">{attendanceData.updatedBy}</div>
              </div>
            )}
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn-primary" onClick={onClose}>关闭</button>
        </div>
      </div>
    </div>
  );
};

export default AttendanceDetailModal;